<template>
    <div class="template-index-Lu">
        <div style="margin:0 auto;display: flex;flex-wrap:wrap;padding:10px 30px;">
            <span></span>
            <div class="aaaaaaa" @click="addFormClick(item.addStr)" v-for="(item,index) in moduleItem1" style="padding:30px;text-align:center">
                <div  class="menuDiv" :style="{height:(windowInnerHeight / 5)+'px',width:(windowInnerHeight / 5)+'px',}">
                    <i
                        v-if="iconType(item.icon)"
                        class="menuDiv-icon iconfont"
                        :class="item.icon"
                        >
                    </i>
                    <ych-icon
                        v-else
                        class="menuDiv-icon"
                        :type="item.icon"
                        >
                    </ych-icon>
                    <span style="padding-top:8px">{{ item.name }}</span>
                </div>
            </div>
        </div>
        <handleModal ref="handleModalRef"></handleModal>
    </div>
</template>
<script>
import handleModal from './handleModal.vue'
import {verifyDy} from './service/index'
export default {
    components:{
        handleModal
    },
    props:{
    },
    data(){
        return{
            moduleItem1: [
                {
                    'name':'入党申请',
                    'icon':'clock-circle',
                    'addStr':'入党申请',
                },
            ],
            menuColorList: [
                'background-image: linear-gradient(135deg, rgba(28, 157, 208, 0.8), rgba(28, 157, 208, 0.5));',
                'background-image: linear-gradient(135deg, rgba(115, 197, 150, 0.8), rgba(115, 197, 150, 0.5));',
                'background-image: linear-gradient(135deg, rgba(67, 140, 215, 0.8), rgba(67, 140, 215, 0.5));',
                'background-image: linear-gradient(135deg, rgba(117, 113, 220, 0.8), rgba(117, 113, 220, 0.5));',
            ],
            windowInnerHeight:window.innerHeight - 80 - 120,
            windowInnerWidth:window.innerWidth,
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        addFormClick(type){
            verifyDy().then(res => {
                //console.log(res)
                if(res.success){
                    this.$message.success(res.message)
                    this.$nextTick(_ => {
                        this.$refs.handleModalRef.handleModalVisible = true
                    })
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        iconType(name){
            if(name.substr(0,4) == 'spcy'){
                return true
            } else {
                return false
            }
        }

    },
}
</script>
<style lang="less" scoped>
.menuDiv {
    position: relative;
    display: inline-block;
    text-align: center;
    background: #fff;
    font-size: 16px;
    border-radius: 30px;
    box-shadow: 10px 10px 20px rgba(136,136,136,1);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    //
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .menuDiv-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            color: #fff;
            line-height: 55px;
            font-size: 26px;
            margin-bottom: 5px;
        }
        .badge {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 25px;
            height: 25px;
            background-color: red;
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 25px;
            font-size: 16px;
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
        }
}
.menuDiv:hover {
        font-size: 18px;
        margin-top: -25px;
        .menuDiv-icon {
            font-size: 28px;
        }
        .badge {
            top: 0;
            right: 0;
        }
    }
.aaaaaaa:nth-child(4n+1) .menuDiv > .menuDiv-icon {
    background-image: linear-gradient(135deg, rgba(28, 157, 208, 0.8);
    rgba(28, 157, 208, 0.5))
}
.aaaaaaa:nth-child(4n+2) .menuDiv > .menuDiv-icon {
    background-image: linear-gradient(135deg, rgba(115, 197, 150, 0.8);
        rgba(115, 197, 150, 0.5))
}
.aaaaaaa:nth-child(4n+3) .menuDiv > .menuDiv-icon {
    background-image: linear-gradient(135deg, rgba(67, 140, 215, 0.8);
        rgba(67, 140, 215, 0.5))
}
.aaaaaaa:nth-child(4n+4) .menuDiv > .menuDiv-icon {
    background-image: linear-gradient(135deg, rgba(117, 113, 220, 0.8);
    rgba(117, 113, 220, 0.5))
}
</style>
